import React,{useState,useEffect} from "react";
import './login.scss';
import { Button, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import { $login } from "../../api/adminapi";
import MyNotification from "../../components/MyNotification/MyNotification";
import logo from '../../resource/logo.png';
export default function Login(){
    //通知框状态
    const [notiMsg, setNotiMsg] = useState({ type: "", description: "" });
    //表单
    const [form] = Form.useForm();
    //提交表单
    const onFinish = async (values) => {
        const response = await $login(values);  
        const { code, message,data} = response;
      //  const code=1;
      //   const message='登录成功';
        if (code) {
            setNotiMsg({ type: "success", description: message });
            const { token, user } = data;
            const{studentId}=user;
            localStorage.setItem('token', token);
            localStorage.setItem('studentId', studentId);
        } else {
            setNotiMsg({ type: "error", description: message })
        }
    };
      //导航
    const navigate = useNavigate();
    useEffect(() => {
        if (notiMsg.type === "success") {
            navigate("/layout/square");
        }
    }, [notiMsg]);
    return(
        <div className='login'>
          <div className='left' style={{display:"flex",justifyContent:"center",alignItems:"center"}}>
              <img src={logo} style={{width: '150px', height: '150px'}}/>
          </div>
            <div className='right'>
            <div style={{width:"50vw",height:"20vh"}}></div>
            <h2 style={{color:'rgb(178, 234, 230)',marginLeft:"40px"}}>统一身份验证</h2>
          <Form
    name="basic"
    form={form}
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    autoComplete="off"
  >
    

    <Form.Item
      label="邮箱地址"
      name="email"
      rules={[
        {
          required: true,
          message: '请输入邮件地址',
        },
      ]}
    >
      <Input />
    </Form.Item>


    <Form.Item
      label="密码"
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>


              <Form.Item
                  wrapperCol={{
                      offset: 8,
                      span: 16,
                  }}
              >
                  <div style={{display:"flex",justifyContent:"center"}}>
                      <div onClick={() => {
                          navigate("/register")
                      }} style={{color: 'blue', display:'fe', marginRight: '80px'}}>去注册
                      </div>
                      <div onClick={() => {
                          navigate("/administrator")
                      }} style={{color: 'blue', textAlign: 'center', marginRight: '80px'}}>管理员登录
                      </div>
                  </div>
                  <Button type="primary" htmlType="submit" style={{
                      backgroundColor: 'rgb(178, 234, 230)',
                      width: '140px',
                      height: "40px",
                      marginTop: '20px'
                  }}>
                      登录
                  </Button>
                  <Button onClick={() => {
                      form.resetFields()
                  }} style={{marginLeft: "40px", width: '140px', height: "40px"}}>
                      取消
                  </Button>
              </Form.Item>
          </Form>
                <MyNotification notiMsg={notiMsg}/>
            </div>
        </div>
    )
}